<template>
  <div class="asset-chart-card">
    <div class="chart-header">
      <div class="chart-title">资产柱状图</div>
      <div class="chart-legend">
        <span class="legend-item"><i class="legend-icon blue"></i>待出租</span>
        <span class="legend-item"><i class="legend-icon green"></i>已出租</span>
        <span class="legend-item"><i class="legend-icon gray"></i>维护中</span>
      </div>
    </div>
    <div class="chart-container" ref="chartRef"></div>
  </div>
</template>

<script setup>
import { ref, inject, onMounted, watch, computed } from 'vue'
import * as echarts from 'echarts'

// 从父组件注入数据
const statisticsData = inject('statisticsData')
const chartRef = ref(null)
let chart = null

// 从后端数据中提取月度趋势数据
const monthlyData = computed(() => {
  if (!statisticsData.value || !statisticsData.value.monthlyTrends) {
    return {
      months: [],
      forRentData: [],
      rentedData: [],
      maintenanceData: []
    }
  }
  
  const trends = statisticsData.value.monthlyTrends
  // 确保月份数据按时间顺序排序
  const sortedTrends = [...trends].sort((a, b) => {
    // 提取年月信息进行比较
    const aDate = a.month
    const bDate = b.month
    return aDate.localeCompare(bDate)
  })
  
  const months = sortedTrends.map(item => item.month)
  const forRentData = sortedTrends.map(item => item.for_rent_count)
  const rentedData = sortedTrends.map(item => item.rented_count)
  const maintenanceData = sortedTrends.map(item => item.maintenance_count)
  
  return { months, forRentData, rentedData, maintenanceData }
})

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return
  
  // 如果已存在chart实例，销毁重建
  if (chart) {
    chart.dispose()
  }
  
  // 创建ECharts实例
  chart = echarts.init(chartRef.value)
  
  // 使用实际数据或默认数据
  const { months, forRentData, rentedData, maintenanceData } = monthlyData.value
  
  // 配置图表选项
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months.length > 0 ? months : ['本月'],
      axisLine: {
        lineStyle: {
          color: '#E0E6F1'
        }
      },
      axisLabel: {
        color: '#606266'
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#EBEEF5',
          type: 'dashed'
        }
      },
      axisLabel: {
        color: '#606266'
      }
    },
    series: [
      {
        name: '待出租',
        type: 'bar',
        stack: false,
        barWidth: 20,
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#409EFF'
        },
        data: forRentData.length > 0 ? forRentData : [0]
      },
      {
        name: '已出租',
        type: 'bar',
        stack: false,
        barWidth: 20,
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#67C23A'
        },
        data: rentedData.length > 0 ? rentedData : [0]
      },
      {
        name: '维护中',
        type: 'bar',
        stack: false,
        barWidth: 20,
        barGap: '-100%', // 使条形图重叠
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          color: '#909399',
          opacity: 0.5
        },
        data: maintenanceData.length > 0 ? maintenanceData : [0]
      }
    ]
  }
  
  // 使用配置项设置图表
  chart.setOption(option)
  
  // 窗口大小变化时自动调整图表大小
  window.addEventListener('resize', () => {
    chart && chart.resize()
  })
}

// 当统计数据变化时更新图表
watch(() => statisticsData.value, (newVal) => {
  if (newVal && newVal.monthlyTrends) {
    // 根据实际数据更新图表
    initChart()
  }
}, { deep: true })

onMounted(() => {
  initChart()
})
</script>

<style lang="scss" scoped>
.asset-chart-card {
  height: 450px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
  
  .chart-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    
    .chart-title {
      font-size: 16px;
      font-weight: bold;
      color: #303133;
    }
    
    .chart-legend {
      display: flex;
      align-items: center;
      
      .legend-item {
        display: flex;
        align-items: center;
        margin-left: 15px;
        font-size: 12px;
        color: #606266;
        
        .legend-icon {
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 2px;
          margin-right: 5px;
          
          &.blue {
            background-color: #409EFF;
          }
          
          &.green {
            background-color: #67C23A;
          }
          
          &.gray {
            background-color: #909399;
          }
        }
      }
    }
  }
  
  .chart-container {
    width: 100%;
    height: 380px;
  }
}
</style> 